<template>
	<view>
		<view>
			<u-upload
				:fileList="fileList"
				@afterRead="afterRead"
				imageMode="scaleToFill"
				name="1"
				:maxCount="1"
				previewImage 
				class="uimg"
			>
				<view v-if="dpic">
					<image :src="imgpath+dpic" class="dplogo" mode="widthFix" />
				</view>
				<view v-else>
					<image :src="`${picUrl}dplogo.png`" class="dplogo" mode="widthFix" />
				</view>
			</u-upload>
		</view>
		<view style="padding:20rpx;font-size:1rem;margin-top:50rpx">
			<u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="form1"
				labelWidth="80"
			>
				<u-form-item
					label="店铺名称"
					prop="sotinfo.shopname"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="model1.sotinfo.shopname"
						border="none"
						placeholder="请输入店铺名称"
					></u--input>
				</u-form-item>
				<u-form-item
					label="档口名"
					prop="sotinfo.wname"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="model1.sotinfo.wname"
						border="none"
						disabled
						placeholder="请输入档口名"
					></u--input>
				</u-form-item>
				<u-form-item
					label="地址"
					prop="sotinfo.shopaddress"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="model1.sotinfo.shopaddress"
						border="none"
						placeholder="请输入地址"
					></u--input>
				</u-form-item>
				<u-form-item
					label="开店时间"
					prop="sotinfo.opentime"
					borderBottom
					ref="item1"
					@click="opentimePoper"
				>
					<u--input
						v-model="model1.sotinfo.opentime"
						border="none"
						disabled
						placeholder="请选择时间"
					></u--input>
				</u-form-item>
				<u-form-item
					label="关店时间"
					prop="sotinfo.closetime"
					borderBottom
					ref="item1"
					@click="closetimePoper"
				>
					<u--input
						v-model="model1.sotinfo.closetime"
						border="none"
						disabled
						placeholder="请选择时间"
					></u--input>
				</u-form-item>
			</u--form>
			
			<view>
				<u-button @click="editStoreInfo" class="editbtn" color="#F66B71" size="large" round>保存</u-button>
			</view>
		</view>
		
		<u-datetime-picker
			:show="showOpentime"
			v-model="opentime"
			mode="time"
			closeOnClickOverlay
			@confirm="getOpentime"
			@cancel="onClose1"
		></u-datetime-picker>
		
		<u-datetime-picker
			:show="showClosetime"
			v-model="closetime"
			mode="time"
			closeOnClickOverlay
			@confirm="getClosetime"
			@cancel="onClose2"
		></u-datetime-picker>
	</view>
</template>

<script>
	import Config from '@/util/index.js'
	import * as Api from '@/api/page.js'
	export default {
		data() {
			return {
				shoplogo: '',
				sotinfo: {},
				model1:{},
				fileList: [],
				imgUrls: [],
				showUpload: false,
				mid: '',
				dpic: '',
				imgpath: '',
				currentDate: '12:00',
				minHour: 1,
				maxHour: 24,
				opentime:"08:00",
				// opentime:0,
				closetime:"24:00",
				showOpentime: false,
				showClosetime: false,
				imgpath: "",
				rules:{
					'sotinfo.shopname': {
						type: 'string',
						required: true,
						message: '请填写店铺名',
						trigger: ['blur', 'change']
					},
					'sotinfo.opentime': {
						type: 'string',
						required: true,
						message: '请填写开店时间',
						trigger: ['blur', 'change']
					},
					'sotinfo.closetime': {
						type: 'string',
						required: true,
						message: '请填写关店时间',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onLoad(options) {
			this.model1.sotinfo = JSON.parse(options.sifo)
			this.mid=uni.getStorageSync('loginInfo').mid
			this.userlogo = JSON.parse(options.sifo).mlogo
			this.imgpath = Config.get('apiUrl')
		},
		methods: {
			getOpentime(e) {
				// this.opentime=event.value
				this.model1.sotinfo.opentime = e.value
				this.onClose1()
				// this.result(e.value)
			},
			result(time) {
				const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast
				return toast(time)
			},
			getClosetime(e) {
				// this.closetime = e.value
				this.model1.sotinfo.closetime = e.value
				this.onClose2()
			},
			onClosChange(){
				
			},
			goUpdateImg() {
				this.showUpload=true
			},
			editStoreInfo() {
				if (this.model1.sotinfo.opentime == "") {
					uni.showToast({
						title: "开店时间不能为空",
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.model1.sotinfo.closetime == "") {
					uni.showToast({
						title: "关店时间不能为空",
						icon: 'none',
						duration: 2000
					});
					return
				}
				let shopname = this.model1.sotinfo.shopname
				if (shopname.indexOf("&") > -1) {
					uni.showToast({
						title: "店铺名称不能包含'&'字符",
						icon: 'none',
						duration: 2000
					});
					return
				}
				let shopaddress = this.model1.sotinfo.shopaddress
				if (shopaddress.indexOf("&") > -1) {
					uni.showToast({
						title: "店铺地址中不能包含'&'字符",
						icon: 'none',
						duration: 2000
					});
					return
				}

				let mologo = ""
				if (this.dpic) {
					mologo = this.dpic
				} else {
					mologo = this.userlogo
				}

				let params = {
					management: {
						mid: this.model1.mid,
						mname: this.model1.sotinfo.mname,
						mtel: this.model1.sotinfo.mtel,
						mcard: this.model1.sotinfo.mcard,
						mlogo: mologo,
						shopname: this.model1.sotinfo.shopname,
						shopaddress: this.model1.sotinfo.shopaddress,
						conetime: this.model1.sotinfo.conetime,
						opentime: this.model1.sotinfo.opentime,
						closetime: this.model1.sotinfo.closetime,
						constime: this.model1.sotinfo.constime,
						openflag: this.model1.sotinfo.openflag,
						orderflag: this.model1.sotinfo.orderflag,
						isflag: this.model1.sotinfo.isflag,
						win: {
							wcode: this.model1.sotinfo.wcode
						},
						bankname: this.model1.sotinfo.bankname,
						bankcard: this.model1.sotinfo.bankcard
					}
				}

				let _this = this
				Api.updateStore(params).then(res=> {
					if (res.retCode == 0) {
						uni.showToast({
							title: "修改成功",
							icon: 'none',
							duration: 2000
						});
						_this.changenShopLogo()
						uni.navigateTo({
							url: 'index',
						})
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			opentimePoper() {
				this.showOpentime=true
			},
			closetimePoper() {
				this.showClosetime=true
			},
			onClose1() {
				this.showOpentime=false
			},
			onClose2() {
				this.showClosetime=false
			},
			
			beforeRead(event) {
				const {
					file,
					callback
				} = event.detail;
				callback(file.type === 'image');
			},
			uploadImg(file) {
				let _this = this
				var imgUrl = [];
				uni.uploadFile({
					url: _this.imgpath + '/banner/webPicUpload',
					filePath: file.url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success(res) {
						let logoImg = JSON.parse(res.data)
						// 上传完成需要更新 fileList
						const {
							fileList = []
						} = res.data;
						_this.fileList=fileList;
						_this.model1.sotinfo.mlogo=logoImg.relationPath
						_this.shoplogo= _this.imgpath + logoImg.relationPath
						_this.dpic = logoImg.relationPath
						//  _this.changenShopLogo()
					},
				});
			},
			afterRead(event) {
				let file = event.file;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				this.fileList = file
				this.uploadImg(file);
			},
			// 删除图片
			delete(event) {
				let imgDelIndex = event.detail.index
				let fileList = this.data.fileList
				fileList.splice(imgDelIndex, 1)
				this.fileList = fileList
				this.uploadImg(fileList)
			},
			shopOpentime(e) {
				this.opentime=e.detail
			},
			shopClosetime(e) {
				this.closetime=e.detail
			},
			changenShopLogo() {
				let params = {
					mid: uni.getStorageSync('loginInfo').mid,
					mlogo: this.dpic
				}
				Api.editShoplogo(params).then(res=> {
					// _this.setData({
					//   noticelist:res.shoppubinfos
					// })
				})
			}
		}
	}
</script>

<style scoped>
	.dplogo {
		width: 200rpx;
		height: 200rpx;
		display: block;
	}
	.uimg{width:200rpx;height:200rpx;margin:50rpx auto 10rpx}
	.editbtn {
		width: 96%;
		height: 60rpx !important;
		position: fixed;
		bottom: 80rpx;
		left: auto;
		right: auto
	}

	.custom-class {
		height: 50rpx !important
	}
</style>
